<template>
  <view class="content">
    <view class="all-box">
      <view class="left-aside">
        <view :class="['left-item', clickIndex == index ? 'left-active-item' : '']" v-for="(item, index) in leftSide"
              :key="index" @click="leftClick(item, index)">
          {{ item.name }}
        </view>
      </view>
      <view class="right">

        <view class="right-tab">
          <u-tabs lineColor="#0170ef" lineWidth="64rpx" lineHeight="8rpx" activeStyle="color:#0170ef" ref="tabs"
                  inactiveStyle="#4E5969" :list="tabsList" :current="current" @click="tabsClick" :scrollable="false"></u-tabs>
        </view>


        <template v-if="dataList.length > 0">
          <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" :enable-passive="true" :lower-threshold="30"
                       @scrolltolower="scrolltolower" :refresher-enabled="enablerefresh" :refresher-triggered="triggered"
                       :refresher-threshold="100" refresher-default-style="white" refresher-background="#F8F8F8"
                       @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
                       @refresherabort="onAbort">

            <listItem :type="type" :current="current" :dataList="dataList">
            </listItem>


          </scroll-view>
        </template>
        <view class="no-data" v-else>
          <image src="@/static/no-data.png" mode="widthFix"></image>
          <view class="no-data-text"> 暂无内容 </view>
        </view>
      </view>
    </view>
    <!--		<shoptabbar :tabbarIndex="2"></shoptabbar>-->
  </view>
</template>

<script>
// import shoptabbar from '@/pages/pagesMall/components/shoptabbar/shoptabbar.vue'
import listItem from "@/pagesMall/components/list/list.vue";
import {
  mapState,
  mapGetters
} from 'vuex'
export default {
  components: {
    // shoptabbar,
    listItem
  },
  computed: {
    ...mapGetters(['userInfo']),
  },

  data() {
    return {
      headTitle: "最新推荐",
      //左侧tab数据
      leftSide: [{
        id: "1",
        name: "我的赠送",
      }, {
        id: "2",
        name: "我的领取",
      }, {
        id: "3",
        name: "商品发货",
      }, {
        id: "4",
        name: "我的购买",
      }],
      type: 1, //左侧tab选中id
      clickIndex: 0, //左侧tab选中值
      // 右侧横向tab
      current: 0, //当前右侧默认选中值
      tabsList: [{
        name: '商品'
      }, {
        name: '代金券'
      },
        {
          name: '大礼包'
        }
      ],
      //右侧数据
      dataList: [], //界面显示tab的数据
      //优惠券领取状态照片
      couponStatusImgStatus: [
        'https://file.casugn.com/storecompcard//puMCCZBjY0NFf20e585cd67837d1fb0b4d169c695c66_1705286971097.png',
        'https://file.casugn.com/storecompcard//rFciu4kTExbReea3b8a18ade5f13f1da6c83db3a4753_1705287241061.png',
        'https://file.casugn.com/storecompcard//a4bJbKghXzBh202ed71f60e1b134eb21bb644774c316_1705287286207.png'
      ],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      rightSide: {}, //用来缓存所有产品数据的
      triggered: false,
      enablerefresh: true,
    };
  },
  // 注释掉onPageScroll使用scrolltolower 就这样吧
  // onPageScroll(e) {
  // 	//如果距顶部小于10，则允许下拉刷新
  // 	if (this.pageNo * this.pageSize < this.total) {
  // 		this.enablerefresh = true
  // 		console.log("允许下拉")
  // 		this.getOrderLists()
  // 	} else {
  // 		console.log("不允许下拉")
  // 		this.enablerefresh = false
  // 	}
  // },
  onLoad() {
    this.type = "3"
    this.clickIndex = 2
    this.current = 0
    this.tabsList = [{
      name: '待发货'
    }, {
      name: '进行中'
    }, {
      name: '已发货'
    }]
  },
  async onShow() {
    this.pageNo = 1
    this.pageSize = 10
    this.dataList = []
    this.getOrderLists()
  },
  methods: {
    getOrderLists() {
      // let {
      // 	openId
      // } = this.userInfo
      let {
        openid
      } = uni.getStorageSync('openId')
      let data = {}
      console.log("===============》")
      console.log(this.type)
      switch (this.type) {
        case '1':
          console.log(1111)
          // 我的售出
          data = {
            openId: openid,
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            giftReceive: this.current + 1,
          }
          this.$api.getMsSendShopOrderList(data).then(res => {
            console.log(res)
            if (res.success) {
              this.dataList = [...this.dataList, ...res.result.records]
              this.total = res.result.total
              this.pageNo = res.result.current
              this.pageSize = res.result.size
            }
          })
          break;
        case '2':
          // 我的领取
          console.log(222)
          data = {
            openId: openid,
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            giftReceive: this.current + 1,
          }
          this.$api.getMsReceiveShopOrderList(data).then(res => {
            console.log(res)
            if (res.success) {
              this.dataList = [...this.dataList, ...res.result.records]
              this.total = res.result.total
              this.pageNo = res.result.current
              this.pageSize = res.result.size
            }
          })
          break;
        case '3':
          // 我的领取
          console.log(222)
          data = {
            openId: openid,
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            sellBuy: this.current + 1,
          }
          this.$api.getMsSoldShopOrderList(data).then(res => {
            console.log(res)
            if (res.success) {
              this.dataList = [...this.dataList, ...res.result.records]
              this.total = res.result.total
              this.pageNo = res.result.current
              this.pageSize = res.result.size
            }
          })
          break;
        case '4':
          // 我的领取
          console.log(222)
          data = {
            openId: openid,
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            // giftReceive: this.current + 1,
            sellBuy: this.current + 1
          }
          this.$api.getMsBuyShopOrderList(data).then(res => {
            console.log(res)
            if (res.success) {
              this.dataList = [...this.dataList, ...res.result.records]
              this.total = res.result.total
              this.pageNo = res.result.current
              this.pageSize = res.result.size
            }
          })
          break;
        default:
          break;
      }

    },
    // 左边菜单点击
    leftClick(item, index) {
      console.log(item, index);
      this.clickIndex = index;
      this.type = item.id;
      if (this.type < 3) {
        this.tabsList = [{
          name: '商品'
        }, {
          name: '代金券'
        },
          {
            name: '大礼包'
          }
        ]
      } else {
        this.tabsList = [{
          name: '待发货'
        }, {
          name: '进行中'
        }, {
          name: '已发货'
        }]
      }
      this.current = 0
      this.pageNo = 0
      this.pageSize = 10
      this.dataList = []
      this.getOrderLists()
    },
    // 右侧tab点击切换
    tabsClick({
                index
              }) {
      this.current = index
      console.log(this.current)
      this.pageNo = 0
      this.pageSize = 10
      this.dataList = []
      this.getOrderLists()
    },
    // 注释掉onPageScroll使用scrolltolower 就这样吧
    scrolltolower() {
      //如果距顶部小于10，则允许下拉刷新
      if (this.pageNo * this.pageSize < this.total) {
        this.enablerefresh = true
        console.log("允许下拉")
        this.pageNo += 1
        this.getOrderLists()
      } else {
        console.log("不允许下拉")
        this.enablerefresh = false
      }
    },
    //自定义下拉刷新被触发,重新请求接口
    onRefresh() {
      //做一个判断，判断triggered 是否为true
      if (!this.triggered) {
        this.triggered = true;
        this.pageNo = 1;
        this.leftSide.forEach((item) => {
          if (this.type == "Q554471578" && item.id == "Q554471578") {
            item.isClick = true;
          } else {
            item.isClick = false;
          }
          uni.setStorageSync("leftArr", this.leftSide);
        });
        this.initRightSide(this.getLists(this.type));

        setTimeout((e) => {
          this.triggered = false;
        }, 500);
      }
    },
    //自定义下拉刷新控件被下拉
    onPulling(e) {
      // console.log("onpulling", e);
    },
    //下拉请求接口
    //自定义下拉刷新被复位
    onRestore() {
      this.triggered = false; // 需要重置
      console.log("onRestore");
    },
    //自定义下拉刷新被中止
    onAbort() {
      console.log("onAbort");
    },
  },
};
</script>
<style>
page {
  background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
::v-deep.uni-scroll-view-refresh__spinner>circle {
  color: #ff7000 !important;
}

::v-deep.uni-scroll-view-refresh-inner>svg {
  fill: #ff7000 !important;
}

.content {
  width: 100vw;
  height: 100vh;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 50px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
  box-sizing: border-box;
}

.header-titlt {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.all-box {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  // margin-top: 88rpx;

  .left-aside {
    width: 192rpx;
    background: #ffffff;
    height: 100vh;
    position: fixed;

    .left-item {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; // 默认不换行；
      height: 108rpx;
      line-height: 108rpx;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      border-left: 6rpx solid transparent;
    }

    .left-active-item {
      border-left: 6rpx solid #276AEE;
      color: #276AEE;
      background: #f7f8fa;
    }
  }

  .right {
    width: calc(100% - 194rpx);
    height: 100%;
    margin-left: 194rpx;
    padding-top: 116rpx;
    box-sizing: border-box;
    position: relative;

    .right-tab {
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 10;
      background-color: #f7f8fa;
      padding-top: 32rpx;
    }
  }
}

.scroll-Y {
  height: 100%;
}



.no-data {
  width: 100%;
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #4e5969;
  padding-top: 228rpx;
  margin: 0 auto;

  image {
    width: 240rpx;
    height: 210rpx;
    margin: auto;
  }

  .no-data-text {
    margin-top: 60rpx;
  }
}
</style>
